import { InfoCircleOutlined } from '@ant-design/icons';
import { Col, Row, Tooltip, Divider, DatePicker } from 'antd';
import numeral from 'numeral';
import { ChartCard, Field } from './Charts';
import Trend from './Trend';
import Yuan from '../utils/Yuan';
import styles from '../style.less';
import moment from 'moment';

const topColResponsiveProps = {
  xs: 24,
  sm: 12,
  md: 12,
  lg: 12,
  xl: 6,
  style: {
    marginBottom: 24,
  },
};

const IntroduceRow = ({
  loading,
  dayData,
  weekData,
  monthData,
  yearData,
  selectDay,
  selectWeek,
  selectMonth,
  selectYear,
}) => (
  <Row gutter={24}>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="日销售额"
        action={
          <div>
            <DatePicker
              disabledDate={(current) => {
                return current > moment(new Date());
              }}
              showToday
              onChange={selectDay}
            />
          </div>
        }
        loading={loading}
        total={false}
        footer={false}
        contentHeight={120}
      >
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          销售笔数
          <span className={styles.trendText}>{dayData?.consumeCount}</span>
        </Trend>
        <Trend flag="up">
          销售金额
          <span className={styles.trendText}>{Number(dayData?.consumeAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          开卡笔数
          <span className={styles.trendText}>{dayData?.openCardCount}</span>
        </Trend>
        <Trend flag="up">
          开卡金额
          <span className={styles.trendText}>{Number(dayData?.openCardAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          充值笔数
          <span className={styles.trendText}>{dayData?.rechargeCount}</span>
        </Trend>
        <Trend flag="up">
          充值金额
          <span className={styles.trendText}>{Number(dayData?.rechargeAmount).toFixed(2)}¥</span>
        </Trend>
      </ChartCard>
    </Col>
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="周销售额"
        action={
          <div>
            <DatePicker picker="week" onChange={selectWeek} />
          </div>
        }
        loading={loading}
        total={false}
        footer={false}
        contentHeight={120}
      >
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          销售笔数
          <span className={styles.trendText}>{weekData?.consumeCount}</span>
        </Trend>
        <Trend flag="up">
          销售金额
          <span className={styles.trendText}>{Number(weekData?.consumeAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          开卡笔数
          <span className={styles.trendText}>{weekData?.openCardCount}</span>
        </Trend>
        <Trend flag="up">
          开卡金额
          <span className={styles.trendText}>{Number(weekData?.openCardAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          充值笔数
          <span className={styles.trendText}>{weekData?.rechargeCount}</span>
        </Trend>
        <Trend flag="up">
          充值金额
          <span className={styles.trendText}>{Number(weekData?.rechargeAmount).toFixed(2)}¥</span>
        </Trend>
      </ChartCard>
    </Col>{' '}
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="月销售额"
        action={
          <div>
            <DatePicker picker="month" onChange={selectMonth} />
          </div>
        }
        loading={loading}
        total={false}
        footer={false}
        contentHeight={120}
      >
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          销售笔数
          <span className={styles.trendText}>{monthData?.consumeCount}</span>
        </Trend>
        <Trend flag="up">
          销售金额
          <span className={styles.trendText}>{Number(monthData?.consumeAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          开卡笔数
          <span className={styles.trendText}>{monthData?.openCardCount}</span>
        </Trend>
        <Trend flag="up">
          开卡金额
          <span className={styles.trendText}>{Number(monthData?.openCardAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          充值笔数
          <span className={styles.trendText}>{monthData?.rechargeCount}</span>
        </Trend>
        <Trend flag="up">
          充值金额
          <span className={styles.trendText}>{Number(monthData?.rechargeAmount).toFixed(2)}¥</span>
        </Trend>
      </ChartCard>
    </Col>{' '}
    <Col {...topColResponsiveProps}>
      <ChartCard
        bordered={false}
        title="年销售额"
        action={
          <div>
            <DatePicker picker="year" onChange={selectYear} />
          </div>
        }
        loading={loading}
        total={false}
        footer={false}
        contentHeight={120}
      >
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          销售笔数
          <span className={styles.trendText}>{yearData?.consumeCount}</span>
        </Trend>
        <Trend flag="up">
          销售金额
          <span className={styles.trendText}>{Number(yearData?.consumeAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          开卡笔数
          <span className={styles.trendText}>{yearData?.openCardCount}</span>
        </Trend>
        <Trend flag="up">
          开卡金额
          <span className={styles.trendText}>{Number(yearData?.openCardAmount).toFixed(2)}¥</span>
        </Trend>
        <Divider style={{ margin: '10px 0' }} />
        <Trend
          flag="up"
          style={{
            marginRight: 16,
          }}
        >
          充值笔数
          <span className={styles.trendText}>{yearData?.rechargeCount}</span>
        </Trend>
        <Trend flag="up">
          充值金额
          <span className={styles.trendText}>{Number(yearData?.rechargeAmount).toFixed(2)}¥</span>
        </Trend>
      </ChartCard>
    </Col>
  </Row>
);

export default IntroduceRow;
